<template>
<!-- 首页的歌单组件 -->
    <router-link :to="{path:'/songlist',query:{id:mylistid}}">
        <div class="imgbox">
            <img v-lazy="mylistsrc" alt="" :key="mylistid">
        </div>
        <div class="listen">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-touting"></use>
            </svg>
            <slot name="listnum"></slot>
        </div>
        <div class="title">
            <slot name="listname"></slot>
        </div>
    </router-link>
</template>
<script>
export default {
    name:"indexgedan",
    props:["mylistid","mylistsrc"]
}
</script>
<style lang="less" scoped>
.listen{
        display: inline-block;
        position: absolute;
        top: 2%;
        left: 2%;
        color: #ffffff;
        font-size: 0.8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        // text-shadow: 1px 1px 0px #666;
        svg{
            font-size: 0.9rem;
        }
}
.title{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding: 0.4rem 2px 0 0.4rem;
        min-height: 1.9rem;
        line-height: 1.2rem;
        font-size: 0.82rem;
        color:#686565bf;
}
.imgbox{
    width: 100%;
    font-size: 0px;
    border-radius: 5px;
    overflow: hidden;
    img{
        width: 100%;
    }
}
</style>